<template>
  <ul class="foot-nav">
    <router-link to="/home" tag="li">
      <span class="iconfont icon-shouye"></span>
      <h3>首页</h3>
    </router-link>
    <router-link to="/kind" tag="li">
      <span class="iconfont icon-fenlei"></span>
      <h3>分类</h3>
    </router-link>
    <router-link to="/cart" tag="li">
      <van-badge :content="$store.getters.num">
        <span class="iconfont icon-gouwuchekong"></span>
        <h3>购物车</h3>
      </van-badge>
    </router-link>
    <router-link to="/my" tag="li">
      <span class="iconfont icon-wode"></span>
      <h3>我的</h3>
    </router-link>
  </ul>
</template>

<script>
import Vue from 'vue'
import { Badge } from 'vant'
import { getCart } from '@/api/request.js'
import { mapMutations } from 'vuex'

Vue.use(Badge)

export default {
  name: 'FootNav',
  mounted () {
    getCart({
      userId: sessionStorage.getItem('userId')
    }).then(data => {
      this.change_cartList(data.data.msg.proData)
    })
  },
  methods: {
    ...mapMutations({
      change_cartList: 'cart/change_cartList'
    })
  }
}
</script>

<style lang="scss">
.foot-nav{
  height: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #efefef;
  li{
    height: 100%;
    list-style: none;
    flex:1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    span{
      font-size: 0.3rem;
    }
    &.router-link-active{
      background: pink;
    }
  }
  .child {
    width: 40px;
    height: 40px;
    background: #f2f3f5;
    border-radius: 4px;
  }
}
</style>
